<template>
<div>
  <div class="home-nav-right">
    <div class="tools-list">
      <!-- 客服 -->
      <d-tooltip position="left" overlay-class="tools-tag-tooltip">
        <div class="tools-list-item">
          <img class="inline-block w-[100px]" src="https://cdn-static.gitcode.com/static/images/news-activity-consult.gif" alt="">
        </div>
        <template #content>
          <div class="home-nav-tooltip-wrapper flex flex-col items-center">
            <div class="pl-[8px] text-nowrap">合作咨询，请与 <span class="text-[#2951E0]">GitCode 代码君</span> 联系。</div>
            <img class="qrcode" src="https://cdn-static.gitcode.com/static/images/news-activity-code.png"/>
          </div>
        </template>
      </d-tooltip>
    </div>
    <div @click="backTop" v-if="backTopVisible">
      <div class="back-top !bg-[#fff] w-[48px] h-[48px] ">
        <GIcon name="gt-plane-Topping" class="home-nav-icon"/>
      </div>
    </div>
  </div>
  <div class="home-nav-right-mobile">
    <d-tooltip position="top" overlay-class="tools-tag-tooltip" >
      <div class="activity-consult">
        <GIcon name="gt-plane-activity-white" class="mr-[4px]"/>
        活动咨询
      </div>
      <template #content>
        <div class="home-nav-tooltip-wrapper flex flex-col items-center">
          <div class="pl-[8px] text-[12px] text-nowrap">合作咨询，请与  <span class="text-[#2951E0]">GitCode 代码君</span> 联系。</div>
          <img class="qrcode" src="https://cdn-static.gitcode.com/static/images/news-activity-code.png"/>
        </div>
      </template>
    </d-tooltip>
  </div>
</div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import { reactive, ref, computed } from 'vue';
import { useReport } from '@/composables/hooks/useReport'
import { emitEvent } from '@/composables/useMitt';
import { udeskInit } from '@/utils/udesk';

// 回到顶部
const backTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

// 是否显示回到顶部按钮
const backTopVisible = ref(false);
const handleScroll = () => {
  backTopVisible.value = window.scrollY > 300;
};
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});

</script>

<style scoped lang="scss">
.qrcode {
  width: 138px;
  height: 138px;
}
.home-nav-right {
  position: fixed;
  bottom: 64px;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  @media screen and (max-width: $screen-md) { // 小屏不显示工具栏
    display: none;
  }
}
.home-nav-tooltip-wrapper {
  max-width: 226px;
  font-size: 12px;
  line-height: 18px;
  padding: 12px 4px;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
  @apply whitespace-normal break-all;
  a.link-kefu {
    display: inline-block;
  }
}
.tools-list-item {
  pointer-events: auto;
  cursor: pointer;
}
.back-top {
  padding: 16px;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);
  border-radius: 48px;
  pointer-events: auto;
  cursor: pointer;
}
.home-nav-right-mobile {
  width: 100%;
  height: 64px;
  position: fixed;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 0 16px;
  pointer-events: none;
  display: none;
  @media screen and (max-width: $screen-md) {
    display: block;
  }
  .activity-consult {
    width: 100%;
    height: 36px;
    background: linear-gradient(128.22deg, #FF8E55 9.27%, #E93F5C 68.77%);
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
  }
}

</style>
<style lang="scss">
@media screen and (max-width: $screen-md) {
  .default-layout-main-activity {
    margin-bottom: 64px!important;
  }
}

.no-arrow {
  &.devui-popover__content.devui-flexible-overlay {
    background: #fff;
    padding: 0;
    border: none;
    box-shadow: none;
  }

  .devui-flexible-overlay__arrow {
    display: none !important;
  }
}

body .devui-tooltip.tools-tag-tooltip {
  background-color: #fff;
  color: #3B3E55;
}

// 工具栏深色
body .devui-tooltip.tools-tag-tooltip-dark {
  background-color: #30363D;
}
</style>
